<template>
  <div>
    <!--风险预警Head  -->
    <div>风险预警Head</div>
    <div class="head">
      <img src="" alt="" />
      <div class="head_item" v-for="item in 4" :key="item">
        <div class="head_item_l">
          <img src="@/assets/img/fxyj_icon.png" alt="" />
        </div>
        <div class="head_item_r">
          <div class="head_item_r_title">涉诉资产交易市场</div>
          <div class="head_item_r_num">4 <span>个</span></div>
        </div>
      </div>
    </div>
    <!-- 风险评估 -->
    <div class="fxpg">
      <div class="inform">
        <div style="width: 100%; height: 100%" id="main"></div>
          <div class="container">
      <p></p>
      <div class="text_item">
        <div class="item" @click="clickItem(index)" v-for="(item,index) in list" :key="index">{{ item.name }}
        </div>
      </div>

    </div>
      </div>
    </div>
    <!-- 风险排名 -->
    <div class="fxpm">
      <div id="futuresTrading" style="width: 600px; height: 300px"></div>
    </div>
    <!-- 预测日志 -->
    <div class="ycrz">
      <div class="ycrz_head">
        预测日志
      </div>
      <div class="ycrz_table">
        <div class="ycrz_table_th">
          <div class="ycrz_table_th_item">预测日期</div>
          <div class="ycrz_table_th_item">预测市场</div>
          <div class="ycrz_table_th_item">预测状态</div>
        </div>
        <div class="ycrz_table_b">
          <div class="ycrz_table_list" v-for="item in 17" :key="item">
            <div class="ycrz_table_item">2019年01月01日</div>
            <div class="ycrz_table_item">农村产权要素市场</div>
            <div class="ycrz_table_item">
                <img src="@/assets/img/success.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dian from "../../assets/img/dian.png";
export default {
  data() {
    return {
      dataStatus: 0,
       list: [
        { id: 1, name: '收益' },
        { id: 2, name: '成本收入比' },
        { id: 3, name: '净息差' },
        { id: 4, name: '资产总额' },
        { id: 5, name: '负债总额' },
        { id: 1, name: '收益' },
        { id: 2, name: '成本收入比' },
        { id: 3, name: '净息差' },
        { id: 4, name: '资产总额' },
        { id: 5, name: '负债总额' },
      ],
      num: 0,
      max: 0,
      min: 0

    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getList();
      this.futuresTradingAdd();
    });
  },
  methods: {
    getList(data) {
      // 用于清除定时器
      let tootipTimer = null;
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0,0,0,0.3)"
        }
      };
      option = {
        xAxis: {
          //  axisLine: {
          //     show: false, //隐藏y轴
          //   },
          // axisTick: {
          //   show: false,  //刻度线
          // },
          // splitLine: { show: false },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#00FFB5",
              fontSize: "14"
            }
          },

          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        },
        yAxis: {
          //      axisTick:{       //y轴刻度线
          //   show:false
          // },
          axisLabel: {
            formatter: "{value} %",
            textStyle: {
              color: "#00FFB5",
              fontSize: "14"
            }
          },
          splitLine: {
            show: true,

            lineStyle: {
              color: ["#010D15"],
              width: 1,
              type: "solid"
            }
          },

          type: "value",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["#010D15", "#02171F"]
            }
          }
        },
        series: [
          {
            name: "年产值",
            type: "line",
            showBackground: true,
            smooth: false,
            backgroundStyle: {
              color: "rgba(245, 246, 250, 1)"
            },
            symbol: "image://" + dian,
            showAllSymbol: false,
            symbolSize: 20,
            lineStyle: {
              normal: {
                color: "#00FFFB" // 线条颜色
              }
            },
            itemStyle: {
              color: "#C5FD08",
              borderColor: "#C5FD08",
              borderWidth: 2
            },
            label: {
              normal: {
                show: false,
                position: "top",
                rich: {
                  a: {
                    color: "#fff",
                    align: "center"
                  }
                }
              }
            },
            tooltip: {
              show: true
            },
            data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135]
          }
        ]
      };

      option && myChart.setOption(option);
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = tools.loopShowTooltip(myChart, option, {
        interval: 3000, // 轮播间隔时间
        loopSeries: true // 是否开启轮播循环
      });
    },
    futuresTradingAdd() {
      let data1 = [
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 100
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 90
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 80
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 70
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 60
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 50
        }
      ];

      data1.forEach((item, index) => {
        item.rank = index + 1;
      });
      var dataTitle = data1.map(item => {
        return item.positionDesiredName;
      });
      //柱状图1
      var histogramChart1 = echarts.init(
        document.getElementById("futuresTrading")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: params => {
            return `${data1[index].positionDesiredName}: ${option.series[0].data[index]}`;
          }
        },
        legend: {
          show: false
        },
        grid: {
          top: "8%",
          left: "-20%",
          right: "0%",
          bottom: "3%",
          containLabel: true
          // width:'100%',
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01],
          axisTick: {
            //轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            show: false
          }
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisLabel: {
            margin: 200,
            textStyle: {
              align: "align",
              // y轴文字设置不同颜色
              color: function(params, index) {
                let colorList = [
                  "#0FCFED",
                  "#36F9BB",
                  "#00FF68",
                  "#FFFD00",
                  "#FF8A31",
                  "#F46A57"
                ];
                return colorList[index];
              },
              fontSize: "14px"
            },
            formatter: function(value) {
              return "{" + value + "|} {s|" + dataTitle[value - 1] + "}";
            },
            rich: {
              1: {
                height: 27,
                width: 23,
                align: "center",
                color: "#FF8A31",
                backgroundColor: {
                  image: require("../../assets/img/005_47.png")
                }
              },
              2: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../assets/img/004_16.png")
                }
              },
              3: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../assets/img/003_75.png")
                }
              },
              4: {
                height: 27,
                width: 23,
                align: "center",

                backgroundColor: {
                  image: require("../../assets/img/002_31.png")
                }
              },
              5: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../assets/img/001_43.png")
                }
              },
              6: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../assets/img/005_47.png")
                }
              }
            }
          },
          data: data1.map(item => item.rank),
          axisTick: {
            //轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            show: false
          },
          axisLine: {
            //y轴线
            show: false
          }
        },
        series: [
          {
            name: "数据",
            type: "bar",
            data: data1.map(item => item.desiredPostCount),
            // 是否在数据点处显示数值
            label: {
              bleedMargin: 10,
              show: true,
              position: "right",
              left: "10%",
              textStyle: {
                fontSize: 16,
                color: "#FEFC0B"
              }
            },
            barWidth: 17,
            itemStyle: {
              emphasis: {
                barBorderRadius: 7
              },
              normal: {
                barBorderRadius: 7,
                // 不同柱体，不同渐变色
                color: function(params) {
                  console.log(params, "0000");
                  var colorList = [
                    ["#1B2F33", "#0FE0FF", "#FFFFFF"],
                    ["#2F4226", "#00FFB5", "#FFFFFF"],
                    ["#1B2F33", "#0FE0FF", "#FFFFFF"],
                    ["#2F4226", "#00FFB5", "#FFFFFF"],
                    ["#1B2F33", "#0FE0FF", "#FFFFFF"],
                    ["#2F4226", "#00FFB5", "#FFFFFF"]
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: colorItem[2]
                      },
                      {
                        offset: 0.5,
                        color: colorItem[1]
                      },
                      {
                        offset: 1,
                        color: colorItem[0]
                      }
                    ],
                    false
                  );
                }
              }
            }
          }
        ]
      };
      let index = -1;
      this.toolTipTimer = setInterval(selectPie, 1000);
      function leaderShow() {
        // 遍历数据，取消所有图形的高亮效果
        for (var idx in option.series[0].data)
          histogramChart1.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: idx
          });
        histogramChart1.dispatchAction({
          type: "showTip", // 提示框
          seriesIndex: 0,
          dataIndex: index // 第几行柱子高亮
        });
      }
      histogramChart1.on("mouseover", params => {
        // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(this.toolTipTimer);
        index = params.dataIndex;
        leaderShow();
      });

      histogramChart1.on("mouseout", params => {
        // 用户鼠标移出时，重新开始自动切换
        if (this.toolTipTimer) {
          clearInterval(this.toolTipTimer);
          this.toolTipTimer = setInterval(selectPie, 1000);
        }
      });
      function selectPie() {
        // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length;
        index = (index + 1) % dataLen;
        leaderShow();
      }
      histogramChart1.setOption(option);
    }
  }
};
</script>

<style scoped>
/* 风险预警Head */
.head {
  display: flex;
  justify-content: space-between;
  padding: 0 21px;
  box-sizing: border-box;
}
.head_item {
  width: 350px;
  height: 131px;
  background: url(../../assets/img/fxyj_item.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.head_item_r_title {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00ffb5;
}
.head_item_r_num {
  margin-top: 12px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #fff90a;
}
.head_item_l {
  margin-left: 49px;
}
.head_item_r {
  margin-left: 35px;
}
.head_item_r_num span {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #fff90a;
}

/* 风险评估 */
.inform {
  width: 600px;
  height: 500px;
  background-color: #fff;
  /* padding: 0 24px; */
  /* margin-top: -15px; */
  /* overflow: hidden; */
}
.fxpg {
  width: 600px;
  height: 500px;
  border: 1px solid #000;
  margin: 40px;
}
.container {
  height: 20%;
  width: 90%;
  background-color: transparent;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  /* 可以使窗口平稳滚动 */
  /* scroll-behavior: smooth; */
  margin: 0 auto;
  text-align: center;

}

.container p {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right,
      #015159 0%,
      #25CBFC 50%,
      #015159 100%);
  position: absolute;
  top: 15px;
}

.text_item {
  /* justify-content: space-around; */
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
  /* 可以使窗口平稳滚动 */
  scroll-behavior: smooth;
  /* background-color: #00B0B0; */
}

.item {
  display: inline-block;
  width: 20%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00B0B0;
  line-height: 17px;
  position: relative;
  margin-top: 27px;
}

.item::after {
  display: inline-block;
  content: '';
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: -15PX;
  transform: translateX(-50%);

}


.text_item::-webkit-scrollbar {
  display: none;
}


/* 风险排名 */
.fxpm {
  width: 600px;
  /* height: 500px; */
  background-color: #000;
  margin-left: 30px;
  border: 1px solid #000;
}

/* 预测日志 */
.ycrz {
  height: 970px;
  width: 735px;
  border: 1px solid #000;
  margin: 40px;
  background-color: #08141b;
}
.ycrz_head {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.ycrz_table_th {
  margin-top: 19px;
  display: flex;
  align-items: center;
  color: #ffffff;
  width: 733px;
  height: 51px;
  background: linear-gradient(
    0deg,
    rgba(0, 255, 251, 0),
    rgba(3, 171, 205, 0.49)
  );
  border: 1px solid #00ffb5;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
}
.ycrz_table_th_item {
  width: 33.33%;
  display: flex;
  justify-content: center;
}
.ycrz_table_list {
 display: flex;
 align-items: center;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #00D094;
width: 733px;
height: 50px;


}

.ycrz_table_list:nth-of-type(even)
{
	background:#06282C;
}
.ycrz_table_item {
 width: 33.33%;
  display: flex;
  justify-content: center;
}
</style>
